<template>
  <div class='wy-main car-info wei_car_info'>
    <a-form :form="form" @submit="handleSubmit" class="wy-form" >
    <a-row type="flex"  align="middle" class="wei_margin_bottom">
     <a-col :span="14">
      <div class="auth-portrait">
            <img :src="header_img" />
          </div>
        </a-col>
      </a-row>
     <a-row type="flex"  align="middle" class="wei_margin_bottom">
      <a-col :span="12"><p class="height-100" style='margin-right: 12px; text-align: right;'>登录名：</p></a-col>
      <a-col :span="6"><p class="height-100">{{detail.username}}</p></a-col>
    </a-row>
    <a-row type="flex"  align="middle" class="wei_margin_bottom">
      <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>姓名：</p></a-col>
      <a-col :span="6"><p class="height-100">{{detail.nickName}}</p></a-col>
      <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>性别：</p></a-col>
      <a-col :span="6" v-if="detail.ssex==0"><p class="height-100">男</p></a-col>
      <a-col :span="6" v-if="detail.ssex==1"><p class="height-100">女</p></a-col>
      <a-col :span="6" v-if="detail.ssex==2"><p class="height-100">保密</p></a-col>
    </a-row>
    <a-row type="flex"  align="middle" class="wei_margin_bottom">
      <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>手机号：</p></a-col>
      <a-col :span="6"><p class="height-100">{{detail.mobile}}</p></a-col>
      <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>电子邮箱：</p></a-col>
      <a-col :span="6"><p class="height-100">{{detail.email}}</p></a-col>
    </a-row>
      <a-row type="flex"  align="middle" class="wei_margin_bottom">
      <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>部门：</p></a-col>
      <a-col :span="6"><p class="height-100">{{detail.deptName}}</p></a-col>
      <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>角色：</p></a-col>
      <a-col :span="6"><p class="height-100">{{detail.roleName}}</p></a-col>
    </a-row>
      <a-row type="flex"  align="middle" class="wei_margin_bottom">
           <a-col :span="6"><p class="height-100" style='margin-right: 12px; text-align: right;'>用户状态：</p></a-col>
        <a-col :span="6" style="margin-top:-13px;"> 
              <a-radio-group  v-model="value" ><a-radio :value="1">有效</a-radio><a-radio :value="0">禁用</a-radio></a-radio-group>
        </a-col>
    </a-row>
         
      <div class="ant-row ant-form-item">
        <div class="ant-col-10 ant-form-item-label"></div>
        <div class="ant-col-10 ant-form-item-control-wrapper">
          <div class="ant-form-item-control">
            <span class="ant-form-item-children">
              
              <a-button type="primary"  html-type="submit" >
               关闭
              </a-button>

        <!--       <a-button @click="cancel()">
                取消
              </a-button> -->
              
            </span>
          </div>
        </div>
      </div>
      
    </a-form>
  </div>
</template>
<script>

  export default {
    props: ['detail'],
    data() {
      return {
        header_img:'',
        formItemLayout: {
          labelCol: {
            xs: {
              span: 24
            },
            sm: {
              span: 4
            },
          },
          wrapperCol: {
            xs: {
              span: 24
            },
            sm: {
              span: 12
            },
          },
        },
      }
    },
    beforeCreate() {
      this.form = this.$form.createForm(this);
    },
    created() {
      this.value = parseInt(this.detail.status)
      this.header_img = '../../static/avatar/'+this.detail.avatar
    },

    mounted: function() {

    },
    methods: {

      cancel(){
         this.$emit('cancel');
      },
      //认证提交
      handleSubmit(e) {
   
        e.preventDefault();
        this.$emit('cancel');
      },
    },
  }
</script>

<style lang="less" scoped>
         .pass-auth{
            margin-top: 10px;
            span{
                background: #dddddd;
                width: 100px;
                height: 6px;
                display: inline-block;
                margin-right: 10px;
            }
            a{
                color: #dddddd;
                font-size: 18px;
                margin-left: 30px;
            }
            span.red{
                background: #FF2F47;
            }
            span.yellow{
                background: #F5B12E;
            }
            span.green{
                background: #15837A;
            }
            a.red{
                color: #FF2F47;
            }
            a.yellow{
                color: #F5B12E;
            }
            a.green{
                color: #15837A;
            }
        }

        .wei_car_info{
          .auth-portrait{
            width: 150px;
            height: 150px;
            margin-right: 10px;
            float: right;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .wei_margin_bottom{
            margin-bottom: 20px;
          }
        }

</style>